<template>
  <el-form-item label="实验名称" prop="exptName">
    <el-input
      placeholder="请输入实验名称"
      v-model="exptForm.exptName"
      :minlength="0"
      :maxlength="30"
      show-word-limit
      clearable
    />
  </el-form-item>
  <el-form-item label="实验目的" prop="exptPurpose">
    <el-input
      placeholder="请输入实验目的"
      v-model="exptForm.exptPurpose"
      :minlength="0"
      :maxlength="30"
      show-word-limit
      clearable
    />
  </el-form-item>
  <el-form-item label="实验级别" prop="exptLevel">
    <el-select
      allow-create
      clearable
      filterable
      v-model="exptForm.exptLevel"
      placeholder="请选择实验级别"
      @change="selectExptLevel"
    >
      <el-option
        :label="item.name"
        :value="item.id"
        v-for="item in exptLevelList"
        :key="item.id"
      />
    </el-select>
  </el-form-item>
  <el-form-item label="实验工作内容" prop="jobContent">
    <el-checkbox-group v-model="exptForm.jobContent">
      <el-checkbox
        :value="item.id"
        :name="item.name"
        :label="item.name"
        v-for="item in currentJobContent"
      >
        {{ item.name }}
      </el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="实验阶段时间" prop="stageTime">
    <el-table
      :data="exptForm.stageTime"
      style="width: 100%"
      :header-cell-style="{
        backgroundColor: '#173750',
        color: '#ffffff',
        textAlign: 'center',
      }"
      :cell-style="{
        color: '#fff',

        textAlign: 'center',
      }"
      :row-style="{
        color: '#fff',

        textAlign: 'center',
      }"
    >
      <el-table-column prop="stage" label="实验阶段" />
      <el-table-column prop="duration" label="阶段工作时长（天）">
        <template #default="{ row }">
          <div class="duration">
            <el-input-number
              placeholder="阶段工作时长"
              v-model="row.duration"
              size="small"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-form-item>
  <el-form-item label="实验负责人" prop="responsiblePerson">
    <el-select
      v-model="exptForm.responsiblePerson"
      placeholder="请选择实验负责人"
      clearable
      filterable
    >
      <el-option
        :label="item.name"
        :value="item.id"
        v-for="item in exptLevelList"
        :key="item.id"
      />
    </el-select>
  </el-form-item>
  <el-form-item label="实验描述" prop="exptDescribe">
    <el-input
      v-model="exptForm.exptDescribe"
      :minlength="0"
      :maxlength="100"
      show-word-limit
      type="textarea"
      :rows="5"
    />
  </el-form-item>
</template>
<script setup>
import { ref, onMounted, onUnmounted, inject } from "vue";
import { useRoute, useRouter } from "vue-router";
const props = defineProps({
  exptForm: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
let emit = defineEmits([""]);
// 实验级别
const exptLevelList = ref([
  {
    name: "战略级",
    id: 0,
    jobContent: [1, 2, 3, 4, 5, 6, 7, 8],
  },
  {
    name: "战役级",
    id: 1,
    jobContent: [1, 2, 3, 4, 6, 8],
  },
  {
    name: "战术级",
    id: 2,
    jobContent: [1, 3, 5, 7, 8],
  },
]);

// 工作内容
const jobContent = [
  {
    name: "场景编辑",
    id: 1,
  },
  {
    name: "作战筹划",
    id: 2,
  },
  {
    name: "战术规划",
    id: 3,
  },
  {
    name: "联合作战推演",
    id: 4,
  },
  {
    name: "仿真推演",
    id: 5,
  },
  {
    name: "联合作战指挥",
    id: 6,
  },
  {
    name: "单兵指挥",
    id: 7,
  },
  {
    name: "作战评估分析",
    id: 8,
  },
];
const currentJobContent = ref([]);
const selectExptLevel = (e) => {
  console.log(e);
  let ids = exptLevelList.value[e].jobContent;
  console.log(ids);
  currentJobContent.value = jobContent.filter((v) => ids.includes(v.id));
  console.log();
  props.exptForm.jobContent = ids;
  props.exptForm.stageTime = [];
  currentJobContent.value.forEach((v) => {
    props.exptForm.stageTime.push({
      stage: v.name + "阶段",
      duration: 0,
      startTime: "",
      endTime: "",
    });
  });
};
onMounted(() => {});
</script>
<style scoped lang="scss">
:deep() {
  // 表单
  .el-input {
    .el-input__wrapper {
      background-color: #424242 !important;
      .el-input__inner {
        color: #fff;
      }
      .el-input__count-inner {
        background: transparent;
        color: #fff;
      }
    }
  }

  .el-select {
    .el-select__wrapper {
      background-color: #424242;

      .el-select__selected-item {
        color: #fff !important;
      }
      .is-transparent {
        color: #9eaba7 !important;
      }
    }
  }
  .el-form-item__label {
    color: #fff;
  }

  // 表格
  .el-table__expand-icon > .el-icon {
    display: none !important;
  }
  .el-loading-mask {
    background: transparent;
  }

  .el-table__header .cell {
    padding: 0 !important;
    text-overflow: unset !important;
    white-space: nowrap !important;
  }

  .cell:empty::after {
    content: "--" !important;
  }

  .el-table {
    border: none;
    --el-table-border-color: 0;

    font-size: 12px;

    // height: 94% !important;
  }

  .el-table--fit {
    background: transparent;
  }

  .el-table__inner-wrapper {
    border: none;
  }

  .el-table tr {
    color: #fff;
    height: 20px;
    background: #1e292b;
  }

  .cell {
    white-space: nowrap;
  }

  .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    // border-bottom: 1px solid #00ff3f;
  }

  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background: #121d1f;
  }

  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: rgba(255, 255, 255, 0.05);
  }
  .el-table__body tr.current-row > td {
    background-color: #15c0ff20 !important;
  }

  .el-scrollbar {
    // 横向滚动条
    .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
      opacity: 1; // 默认滚动条自带透明度
      height: 8px; // 横向滑块的宽度
      border-radius: 2px; // 圆角度数
      // background-color: rgba(136, 219, 255, 1); // 滑块背景色
      background-color: #3f474d; // 滑块背景色
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); // 滑块阴影
    }

    // 纵向滚动条
    .el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
      opacity: 1;
      width: 8px; // 纵向滑块的宽度
      border-radius: 2px;
      // background-color: rgba(136, 219, 255, 1);
      background-color: #3f474d;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
    }
  }
}
</style>
